<template>
  <div>
    <!-- 导航栏 -->
    <div class="body">
      <van-nav-bar
        title="地址编辑"
        right-text="保存"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
      <ul>
        <li class="main">
          <input type="text" placeholder="姓名" />
        </li>
        <li class="main">
          <i class="iconfont icon-dingwei"></i>
          <input type="text" placeholder="详细地址：例如17号楼601等" />
        </li>
        <li class="main">
          <input type="text" placeholder="姓名" />
        </li>
        <li class="main">
          <input type="text" placeholder="身份证号(选填)" />
        </li>
        <li class="maining">
          <span>购买跨境商品时需要姓名、身份证号用于清关、信息将被加密保存</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style scoped lang='less'>
.body {
      background: #f4f4f4;
  height: 100vh;
  .van-nav-bar__text {
    color: black;
  }
}
ul {
  width: 100%;
  // 主体
  li:nth-child(3) {
    position: relative;
    background: #fff;

    i {
      position: absolute;
      top: 19px;
      left: 7px;
    }
    input {
      margin-left: 25px;
    }
  }
  .main {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #f6f6f6;
    display: flex;
    align-items: center;
    input {
      width: 100%;
      height: 53px;
      border: 0;
      margin-left: 10px;
      box-sizing: border-box;
    }
  }
  li:nth-child(4) {
    // position: relative;
    margin-top: 20px;
    background: #fff;
  }
  .maining {
    margin-top: 15px;
    margin-left: 10px;
    span {
      font-size: 12px;
      color: #dcdddf;
    }
  }
  .maining2 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
  }
}
</style>